import { ModalForm, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { useRef } from 'react';

const PublishModal: React.FC = ({ modalInfo, columnList, open, onOpenChange, onFinish, onCancel }) => {
  const formRef = useRef()

  if (!open) {
    return null;
  }

  return (
    <ModalForm
      layout="horizontal"
      width={480}
      title={'发布文章'}
      formRef={formRef}
      open={open}
      onOpenChange={onOpenChange}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          const values = formRef?.current?.getFieldsValue()
          console.log('@@@ values', values)
          onCancel(values)
        },
      }}
      onFinish={onFinish}
    >
      <ProFormText
        name="title"
        label="标题"
        placeholder="请输入标题"
        initialValue={modalInfo?.title}
        fieldProps={{
          maxLength: 50,
        }}
        rules={[{ required: true, message: '请输入标题' }]}
      />
      <ProFormSelect
        initialValue={modalInfo?.columnIds}
        options={columnList?.map((item) => ({
          label: item.title,
          value: item.id,
        }))}
        name="columnIds"
        label="收录至专栏"
        fieldProps={{
          showSearch: true,
          optionFilterProp: 'label',
          mode: 'multiple',
        }}
      />
      <ProFormTextArea
        initialValue={modalInfo?.description}
        name="description"
        label="编辑摘要"
        placeholder="请输入编辑摘要"
        fieldProps={{
          maxLength: 100,
          rows: 4,
        }}
        rules={[{ required: true, message: '请输入编辑摘要' }]}
      />
    </ModalForm>
  );
};

export default PublishModal;
